Une feuille de style sert à décrire la présentation
d'un document html. Tous les navigateurs possèdent
des feuilles de style par défaut, mais qui sont basiques.
Il faut déclarer la feuille de style dans le head de la page grâce
à la balise <link>. Par exemple :
<link href="styles.css" rel="stylesheet">
sélecteur{
propriété : valeur ;
propriété : valeur ;
propriété : valeur ;
}
Le sélecteur permet de cibler un élément ou plusieurs. Il y a plusieurs méthodes de sélection pour cela.
h1 {
color: #fff;
background: #ff6600;
font-size: 1.6em;
font-family: sans-serif;
padding: 20px;
width: 260px;
margin: 0 auto;
text-align: center;
text-transform: lowercase;
border-radius: 5px;
font-weight: 200;
}
Par exemple ici le sélecteur <h1> va sélectionner tous les titres de niveau h1 du document.
Vous pouvez de cette manière cibler tous les types de balises utilisées dans la page.
Une classe est une propriété que l'on peut ajouter à n'importe quelle balise, afin d'étiqueter un objet.
<ul>
<li>Item de liste</li>
<li>Item de liste</li>
<li class="tomate">Item de liste</li>
<li>Item de liste</li>
<li class="tomate">Item de liste</li>
</ul>
.tomate{
color :tomato;
}
Résultat :
Plusieurs objets peuvent avoir la même classe.
On peut attribuer plusieurs classes au même objet.
<ul>
<li>Item de liste</li>
<li>Item de liste</li>
<li class="tomate legume">Item de liste</li>
<li>Item de liste</li>
<li class="tomate">Item de liste</li>
</ul>
.tomate{
color :tomato;
}
.legume{
background-color : yellow;
}
Résultat :
Similaire à la classe, mais on utilisera un # au lieu du . pour le sélecteur.
l'ID est un identifiant unique. Il ne peut y en avoir qu'un pour les gouverner tous.
En revanche on peut cumuler un ID et une ou plusieurs classes.
<ul>
<li>Item de liste</li>
<li>Item de liste</li>
<li id="tomate">Item de liste</li>
<li>Item de liste</li>
</ul>
#tomate{
color :tomato;
}
Que se passe-t-il si on attribue un style à une balise H1, et une classe appliquant un style contradictoire ?
Ces conflis se calculent avec un ordre de priorité : le id est plus fort que la classe, qui est plus forte que la balise.
ID > CLASS > BALISE
<ul>
<li>Item de liste</li>
<li>Item de liste</li>
<li id="tomate" class="courgette">Item de liste</li>
<li>Item de liste</li>
</ul>
li{
color : black;
}
.courgette{
color:limegreen;
}
#tomate{
color :tomato;
}
Résultat :
Il est possible de combiner les sélecteurs entre eux pour être plus précis :
li.courgette{...} va appliquer le style aux objets li qui auront la classe courgette.
On peut cibler les éléments qui sont dans d'autres éléments pour etre encore plus précis :
li .courgette{...} va appliquer le style aux objets ayant la classe courgette qui seront dans un li.
<ul>
<li>Item de liste</li>
<li>Item de liste</li>
<li>Item de liste</li>
<li>Item de liste</li>
</ul>
<ul class="tomate">
<li>Item de liste</li>
<li>Item de liste</li>
<li>Item de liste</li>
<li>Item de liste</li>
</ul>
.tomate li{
color : tomato;
}
Nous pourrions aussi avoir :
ul.tomate li{
color : tomato;
}
Résultat :